<template>
  <div class="resume-preview">
    <div class="resume-content" id="resume-content">
      <h1>{{ resumeData.name }}的简历</h1>
      <div class="section">
        <h2>基本信息</h2>
        <p>电话: {{ resumeData.phone }}</p>
        <p>邮箱: {{ resumeData.email }}</p>
      </div>
      
      <div class="section" v-if="resumeData.education.length">
        <h2>教育背景</h2>
        <div v-for="(edu, index) in resumeData.education" :key="index">
          <h3>{{ edu.school }}</h3>
          <p>{{ edu.degree }} | {{ edu.major }} | {{ edu.date }}</p>
        </div>
      </div>

      <div class="section" v-if="resumeData.work.length">
        <h2>工作经历</h2>
        <div v-for="(work, index) in resumeData.work" :key="index">
          <h3>{{ work.company }}</h3>
          <p>{{ work.position }} | {{ work.date }}</p>
          <p>{{ work.description }}</p>
        </div>
      </div>
    </div>

    <div class="actions">
      <button @click="printResume">打印/导出PDF</button>
      <button @click="backToEdit">返回编辑</button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
const resumeData = ref({
  name: '',
  phone: '',
  email: '',
  education: [],
  work: []
});

const printResume = () => {
  window.print();
};

const backToEdit = () => {
  navigateTo('/resume/edit');
};
</script>

<style scoped>
.resume-preview {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.resume-content {
  background: white;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.section {
  margin-bottom: 20px;
}

h1 {
  color: #42b983;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
}

h2 {
  color: #42b983;
  border-left: 4px solid #42b983;
  padding-left: 10px;
}

.actions {
  margin-top: 20px;
  text-align: center;
}

button {
  padding: 10px 20px;
  margin: 0 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

@media print {
  .actions {
    display: none;
  }
}
</style>